import React from "react"

import "@/components/PersonCount/PersonCount.component.styl"
import BrokenLineChart from "@/components/common/BrokenLineChart/BrokenLineChart.component"

class PersonCount extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            personCount: 40037987,
            brokenLineData: {
                id: "person-count",
                xData: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
                yName: "游客量统计(人/次)",
                seriesName: "游客量统计(人/次)",
                seriesData: [1820, 1932, 901, 934, 1290, 1330, 1320, 5678, 2300, 3400, 2229, 450, 230]
            }
        }
    }

    render() {
        return (
            <div className="person-count">
                <div className="icon">
                    <i className="icon-1 fa fa-chevron-up"></i>
                    <i className="icon-2 fa fa-chevron-up"></i>
                    <i className="icon-3 fa fa-chevron-up"></i>
                    <i className="icon-4 fa fa-chevron-up"></i>
                </div>
                <div className="title">
                    <i className="left-icon fa fa-angle-right">
                        <i className="fa fa-angle-right"></i>
                    </i>
                    <span className="text">全国旅游人次统计</span>
                    <i className="right-icon fa fa-angle-left">
                        <i className="fa fa-angle-left"></i>
                    </i>
                </div>
                <div className="chart">
                    <div className="text">
                        <span>共计</span>
                        <span className="count">{this.state.personCount}</span>
                        <span>人/次</span>
                    </div>
                    <div className="bar">
                        <BrokenLineChart brokenLineData={this.state.brokenLineData}></BrokenLineChart>
                    </div>
                </div>
            </div>
        );
    }
}

export default PersonCount
